<template>
  <div>
    <zm-panel :visible.sync="value" @change="closeAfter">
      <div slot="title">
        <div class="dib">{{ infoData.name }}</div>
        <tag-type
          :value="linkInfo.linkStatus || infoData.checkStatus"
          :msg="linkInfo.linkStatusMsg"
        />
      </div>
        <app-block class="optionBtn" v-if="infoData.isClose === '0' && +infoData.checkStatus === 3 && infoData.isActive === '0'">
          <!-- 未关闭 + 已通过 + 未激活 -->
          <zm-button
              @click="onOrderClose"
              type="danger"
            >
              关闭销售单
            </zm-button>
        </app-block>
        <app-block class="optionBtn" v-if="isApproval&&isShowApproveBtn">
          <!-- 控制 在审批流里面才显示-->
          <template>
            <zm-button
              @click="onEdit"
              v-if="+linkInfo.isEdit === 1 && isWaitMe === '1'"
              plain
            >
              编辑
            </zm-button>
            <template v-if="infoData.checkStatus === '1'">
              <zm-button
                @click="onRevocation"
                plain
                type="info"
                v-if="+linkInfo.isSponsor"
              >
                撤销审批
              </zm-button>
              <zm-button
                @click="onApproved('0', infoData)"
                type="danger"
                plain
                v-if="+linkInfo.isAction && isHiddenApproveBtn"
              >
                审批驳回
              </zm-button>
              <zm-button
                @click="onApproved('1', infoData)"
                v-if="+linkInfo.isAction && isHiddenApproveBtn"
                plain
                type="success"
              >
                审批通过
              </zm-button>
            </template>
            <zm-button @click="submitAppro" v-if="showBaseBtn" plain>
              提交审批
            </zm-button>
          </template>
        </app-block>
        <app-block>
          <zm-tabs
            class="mt15"
            :list="detailTabsList"
            v-model="activeName"
          ></zm-tabs>
          <components
            v-if="infoData.id && !loading"
            :is="activeName"
            :info-data="infoData"
            :link-info="linkInfo"
            :business-id="businessId"
            :process-type="processType"
            :is-approval="isApproval"
            @after-detail="reLoad"
          ></components>
          <!-- <div slot="footer"></div> -->
        </app-block>
      <div slot="footer"></div>
    </zm-panel>
    <edit-sale
      v-if="editParams.visible"
      v-model="editParams.visible"
      :row-info="editParams"
      @after-save="reLoad"
    ></edit-sale>
    <approve-input
      v-if="showApproveDialog"
      v-model="showApproveDialog"
      :type="approveObj.approveType"
      ref="approveDialog"
      @after-approve="afterApprove"
    ></approve-input>
  </div>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import approveMixin from '@/mixins/approveMixin'
import { detailTabsList } from './const'
import approveProcessApis from '@/api/src/approve'
import BaseInfo from './BaseInfo'
import ApprovalRecord from '@/views/approval/components/Record'
import MoneyBack from './MoneyBack'
import InvoiceRecord from './InvoiceRecord'
import CardCouponActive from './CardCouponActive'
import ReturnGoods from './ReturnGoods'
import OperationLog from './OperationLog'
import EditSale from '../New'
import ApproveInput from '@/components/ApproveInput'
import TagType from '@/components/TagType'
import { PROCESS_TYPE } from '@/model'
import saleOrderApi from '@/api/src/saleOrder'
export default {
  components: {
    BaseInfo,
    ApprovalRecord,
    MoneyBack,
    InvoiceRecord,
    CardCouponActive,
    ReturnGoods,
    OperationLog,
    EditSale,
    ApproveInput,
    TagType
  },
  mixins: [panelMixin, approveMixin],
  props: {
    businessId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeName: 'BaseInfo',
      linkInfo: {},
      infoData: {},
      editParams: {
        visible: false
      },
      showApproveDialog: false,
      loading: false
    }
  },
  computed: {
    detailTabsList () {
      if (this.infoData.checkStatus === '0') {
        return detailTabsList.filter(i => i.name === 'BaseInfo')
      } else if (this.infoData.type === '4') {
        // 包场 不显示卡券激活/回款记录
        // v1.1 需要显示 真折腾
        return detailTabsList.filter(i => {
          if (this.infoData.checkStatus === '3') {
            // 已通过
            return true
            // i.name !== 'CardCouponActive' && i.name !== 'ReturnGoods' v1.1
          } else {
            return i.name === 'BaseInfo' || i.name === 'ApprovalRecord'
          }
        })
      } else if (this.infoData.checkStatus === '3') {
        return detailTabsList
      } else {
        return detailTabsList.filter(
          i => i.name === 'BaseInfo' || i.name === 'ApprovalRecord'
        )
      }
    },
    spotStyle () {
      // linkStatus 1审批中，2审批通过，3审批驳回，4已撤销
      // 补一个未提交的样式
      if (this.infoData.checkStatus === '0') {
        this.$set(this.linkInfo, 'linkStatusMsg', '未提交')
        return 'text-info'
      } else {
        let obj = {
          1: 'text-primary',
          2: 'text-error',
          3: 'text-success',
          4: 'text-warning'
        }
        return obj[+this.infoData.checkStatus]
      }
    },
    showBaseBtn () {
      return (
        ['2', '4'].includes(this.infoData.checkStatus) &&
        +this.linkInfo.isSponsor
      )
    },
    isEditButton () {
      // 在提交按钮条件上增加一个是否可编辑
      return this.showBaseBtn || this.linkInfo.isEdit === '1'
    },
    isApprovalButton () {
      return (
        this.linkInfo.linkStatus === '1' && this.linkInfo.isApprove === '1'
      )
    },
    processType () {
      // return +this.infoData.type + 2 + ''
      let processType
      if (+this.infoData.checkStatus === 0) {
        processType = +this.infoData.type
      } else {
        switch (+this.infoData.type) {
          case 1:
            processType = 3
            break
          case 2:
            processType = 4
            break
          case 3:
            processType = 5
            break
          case 4:
            processType = 9
            break
          case 5:
            processType = 10
            break
          case 6:
            processType = 12
            break
          case 7:
            processType = 13
            break
        }
      }

      return processType
    },
    approveObj () {
      return {
        businessId: this.businessId,
        processType: this.processType,
        approveType: '0'
      }
    }
  },
  watch: {},
  created () {
    this.getInfo() // 进入时重新获取详情，后续刷新要用数据
  },
  methods: {
    async getInfo () {
      this.loading = true
      const _res = await saleOrderApi.getInfo({ id: this.businessId })
      this.infoData = {
        ..._res,
        customizePrice: _res.customizePrice && JSON.parse(_res.customizePrice),
        productList: JSON.parse(_res.productList)
      }
      // productType 1兑换券，2卖品券，3点卡，4次卡，5优惠券
      // checkStatus 审核状态：0未提交，1未审批，2已拒绝，3已通过，4已退回
      if (this.isApproval) {
        this.getApprove()
      }
      this.loading = false
    },
    reLoad () {
      this.getInfo()
      this.$emit('after-save')
    },
    async getApprove () {
      const _res = await approveProcessApis.getLinkStatus({
        businessId: this.businessId,
        processType: this.processType
      })
      this.linkInfo = _res
    },
    onEdit () {
      console.log(this.$route.name, 'routename')
      let isApprove
      if (this.$route.name === 'approvalMgr') {
        isApprove = '1'
      } else {
        isApprove = ''
      }
      this.editParams = {
        visible: true,
        id: this.infoData.id,
        type: this.infoData.type,
        isApprove: isApprove
      }
    },
    async submitAppro () {
      await approveProcessApis.submit({
        businessId: this.businessId,
        processType: this.processType,
        linkName: this.infoData.name
      })
      this.$message.success('成功提交审批!')
      this.reLoad()
    },

    async onOrderClose () {
      await saleOrderApi.close({id: this.businessId})
      this.$message.success('关闭成功')
      this.reLoad()
    }
  }
}
</script>

<style scoped lang="scss"></style>
